<template>
    <div>
        <div class="mb-2">
            <el-button type="primary" @click="onButtonClick1(1)">按钮1</el-button>
        </div>
        <div class="mb-2">
            <el-button type="primary" @click="onButtonClick2(2)">按钮2</el-button>
        </div>
        <div class="mb-2">
            <el-button type="primary" @click="onButtonClick3(2)">按钮3</el-button>
        </div>
        <div class="mb-2">
            <el-button type="primary" @click="onButtonClick4(4)">按钮4</el-button>
        </div>
        <div class="mb-2">
            <el-button type="primary" @click="onButtonClick5('guest',1)">按钮5</el-button>
        </div>
        <div class="mb-2">
            <el-button type="primary" @click="onButtonClick6('guest',1)">obj作为key</el-button>
        </div>
        <div class="mb-2">
            <el-button type="primary" @click="test">测试</el-button>
        </div>
    </div>
</template>

<script>
    import {sendLog, jumpTo} from "../utils";
    import { mapState, mapMutations , mapActions , mapGetters } from "vuex";

    export default {
        name: 'testComponent',
        data() {
            return {
                text: '测试js判断的我8种写法'
            }
        },
        created() {
            console.log(this.userCount);
            console.log(this.appCount);

        },
        computed: {
          ...mapState({
              userCount: state => state.user.userCount,
              appCount: state => state.app.appCount,
          })
        },
        methods: {
            ...mapMutations('user',[
                'increment'
            ]),
            ...mapMutations('app',[
                'appIncrement'
            ]),
            test() {
                // console.log(this.increment());
                // 1.方法1
                // this.$store.commit('user/increment');
                // this.$store.commit('app/increment');
                // this.increment();
                // this.appIncrement();
                console.log(this.appCount);

            },
            dealCommit() {

            },
            onButtonClick1(status) {
                if (status == 1) {
                    sendLog('火影忍者');
                    jumpTo('index Page');
                } else if (status == 2) {
                    sendLog('王者荣耀');
                    jumpTo('wangzhe Page');
                } else if (status == 3) {
                    sendLog('和平精英');
                    jumpTo('PUBG Page');
                } else if (status == 4) {
                    sendLog('守望先锋');
                    jumpTo('守望先锋 Page');
                } else if (status == 5) {
                    sendLog('炉石传说');
                    jumpTo('炉石传说 Page');
                } else {
                    sendLog('other');
                    jumpTo('other Page');
                }
            },
            onButtonClick2(status) {
                switch (status) {
                    case 1:
                        sendLog('火影忍者');
                        jumpTo('index Page');
                        break;
                    case 2:
                        sendLog('王者荣耀');
                        jumpTo('wangzhe Page');
                        break;
                    case 3:
                        sendLog('和平精英');
                        jumpTo('PUBG Page');
                        break;
                    case 4:
                        sendLog('守望先锋');
                        jumpTo('守望先锋 Page');
                        break;
                    case 5:
                        sendLog('炉石传说');
                        jumpTo('炉石传说 Page');
                        break;
                    default:
                        sendLog('other');
                        jumpTo('other Page');
                        break;
                }
            },
            onButtonClick3(status) {
                const actions = {
                    1: ['火影忍者', 'index Page'],
                    2: ['王者荣耀', 'wangzhe Page'],
                    3: ['和平精英', 'PUBG Page'],
                    4: ['守望先锋', '守望先锋 Page'],
                    5: ['炉石传说', '炉石传说 Page'],
                    'default': ['other', 'other Page'],
                }
                let action = actions[status] || actions['default'],
                    logName = action[0],
                    pageName = action[1];
                sendLog(logName);
                jumpTo(pageName);
            },
            onButtonClick4(status) {
                const actions = new Map([
                    [1, ['火影忍者', 'index Page']],
                    [2, ['王者荣耀', 'wangzhe Page']],
                    [3, ['和平精英', 'PUBG Page']],
                    [4, ['守望先锋', '守望先锋 Page']],
                    [5, ['炉石传说', '炉石传说 Page']],
                    ['default', ['other', 'other Page']]
                ]);
                console.log('map长度:', actions.size);
                let action = actions.get(status) || actions.get('default')
                sendLog(action[0]);
                jumpTo(action[1]);
            },
            onButtonClick5(identity, status) {
                const actions = new Map([
                    ['guest_1', () => {
                        console.log('guest_1111');
                    }],
                    ['guest_2', () => {/*do sth*/
                    }],
                    ['guest_3', () => {/*do sth*/
                    }],
                    ['guest_4', () => {/*do sth*/
                    }],
                    ['guest_5', () => {/*do sth*/
                    }],
                    ['master_1', () => {/*do sth*/
                    }],
                    ['master_2', () => {/*do sth*/
                    }],
                    ['master_3', () => {/*do sth*/
                    }],
                    ['master_4', () => {/*do sth*/
                    }],
                    ['master_5', () => {/*do sth*/
                    }],
                    ['default', () => {/*do sth*/
                    }],
                ]);
                // 对象实现也是一样的
                // const actions2 = {
                //     'guest_1':()=>{/*do sth*/},
                //     'guest_2':()=>{/*do sth*/},
                //     //....
                // }
                let action = actions.get(`${identity}_${status}`) || actions.get('default');
            },
            onButtonClick6(identity, status) {
                const actions = new Map([
                    [{identity: 'guest', status: 1}, () => {
                        console.log(`${identity}-${status} 用户登录`)
                    }],
                    [{identity: 'guest', status: 2}, () => {
                        console.log(`${identity}-${status} 用户登录`)
                    }],
                ])
                // map的遍历方法 使用for of 对map数组进行map.keys() map.values() map.entries() map进行遍历

                // 将map对象转换为数组, ...解构操作
                // let action = [...actions].filter([key,value]=>())
                let curAction = ([...actions]).filter((item, index) => {
                    return item[0].identity == identity && item[0].status == status
                })
                curAction.forEach(([key, value]) => {
                    console.log('key', key)
                    console.log('value', value)
                    value.call(this);
                })
                // curAction.forEach((item,index)=>{
                //     console.log(item)
                // })
            }
        }
    }
</script>
